<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-3.5.1.js"></script>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row table-bordered" style="margin-top: 20px;line-height: 100px">
                    <div class="col-md-12 form-inline text-center">
                        <form id="searchFormId">
                            <input type="hidden" name="nowPage" id="pageNum">
                            <input type="hidden" name="pageCout" id="pageCout">
                            名称:<input type="text" placeholder="请输入软件名称" class="form-control" style="width: 150px"
                                      name="appName">
                            类型:
                            <select class="form-control" name="appTypeId">
                                <option value="0">请选择类型</option>
                                <option v-for="appType in appTypeList" :value="appType.id">{{appType.typeName}}</option>
                            </select>
                            软件平台:
                            <select class="form-control" name="appPlatformId">
                                <option value="0">请选择平台</option>
                                <option v-for="appPlatform in appPlatformList" :value="appPlatform.id">
                                    {{appPlatform.platformName}}
                                </option>
                            </select>
                            审批状态:
                            <select class="form-control" name="appStatus">
                                <option value="0">请选择状态</option>
                                <option value="1">已审批</option>
                                <option value="2">未审批</option>

                            </select>
                            <button type="button" class="btn btn-warning" @click="findAp"><span
                                    class="glyphicon glyphicon-search"></span>搜索
                            </button>
                            <button type="button" class="btn btn-primary">批量审批</button>

                        </form>
                    </div>
                </div>

                <div class="row" style="margin-top: 20px">
                    <table class="table-bordered col-md-12 text-center">
                        <tr style="line-height: 50px">
                            <td><input type="checkbox" class="all" @change="allSel"> 全选/全消</td>
                            <td>编号</td>
                            <td>名称</td>
                            <td>大小</td>
                            <td>类型</td>
                            <td>软件平台</td>
                            <td>下载次数</td>
                            <td>图片</td>
                            <td colspan="2">操作</td>
                        </tr>
                        <tbody>
                        <tr v-for="(app,index) in appList" :key="index">
                            <td>选择<input type="checkbox" :value="app.id" class="sel" @change="checkSel"></td>
                            <td>{{app.id}}</td>
                            <td>{{app.appName}}</td>
                            <td>{{app.appSize}}M</td>
                            <td>{{app.appType.typeName}}</td>
                            <td>{{app.appPlatform.platformName}}</td>
                            <td>{{app.appCount}}次</td>
                            <td>
                                <img :src="app.appImg" width="50px">
                            </td>
                            <td>
                                <button class="btn btn-danger" type="button">
                                    <span class="glyphicon glyphicon-remove"></span>驳回
                                </button>
                            </td>
                            <td>
                                <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#updateModal" @click="gotoShow(app.id)">
                                    <span class="glyphicon glyphicon-edit"></span>通过
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="text-center">
                    <ul class="pager">
                        <li @click="changePage(-1)"><a href="#">&laquo;</a></li>
                        <li v-for="page in pageList" @click="changePage(page)"><a href="#">{{page}}</a></li>
                        <li @click="changePage(-2)"><a href="#">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
    let pageCout = 4;
    let vue = new Vue({
        el: "#app",
        data: {
            appList: [],
            pageList: [],
            appTypeList: [],
            appPlatformList: [],
        }, methods: {
            queryAppType() {
                $.ajax({
                    url: "../queryAppType",
                    dataType: "json",
                    type: "get",
                    success: (list) => {
                        this.appTypeList = list;
                    }
                });
            }, queryAppPlatForm() {
                $.ajax({
                    url: "../queryAppPlatform",
                    dataType: "json",
                    type: "get",
                    success: (list) => {
                        this.appPlatformList = list;
                    }
                });
            }, queryAllApp(nowPage) {
                $('#pageNum').val(nowPage);
                $('#pageCout').val(pageCout);
                $.ajax({
                    url: "../queryApp",
                    type: "post",
                    data: $('#searchFormId').serialize(),
                    dataType: "json",
                    success: (info) => {
                        this.appList = info.list;
                        this.pageList = info.navigateLastPage;
                    }
                })
            }, changePage(page) {
                this.queryAllApp(page);
            }, allSel() {
                $('.sel').prop("checked", $('.all').prop("checked"))
            }, checkSel() {
                let flag = true;
                $('.sel').each(function () {
                    if (!$(this).prop("checked")) {
                        flag = false;
                    }
                });
                $(".all").prop("checked", flag);
            },findAp(){
                this.queryAllApp(1);
            },gotoShow(id){
                let flag=confirm("您确认审批通过"+id+"App吗？")
                if(flag){
                    let goId=1;
                    $.ajax({
                        url:"../updateAppgo",
                        type:"get",
                        data:{id,goId},
                        dataType:"text",
                        success:(text)=>{
                            if(text=="ok"){
                                alert("审批通过！")
                                this.queryAllApp(1);
                            }
                        }
                    })
                }
                },
        }, created() {
            this.queryAllApp(1);
            this.queryAppType();
            this.queryAppPlatForm();
        }
    })
</script>
</body>
</html>
    